<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-8">
        <title>ContextJS</title>

        <link rel="stylesheet" type="text/css" href="context.standalone.css">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script src="demo2.js"></script>
        <script src="context.js"></script>
        <style type="text/css">
            html, body {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="rightClick" style="position: absolute; top: 0; left: 0; height: 50%; width: 100%;">
            <div id="PNG_JPG" style="position: absolute; top: 0; left:0; height: 100%; width: 50%; background: lime;">
                Right click here for dynamic menu with PNG/JPG as options.
            </div>
            <div id="NO_OPTIONS" style="position: absolute; top: 0; left: 50%; height: 100%; width: 50%; background: orange;">
                This will have no options in the dynamic menu.
            </div>
        </div>
        <div id="notDynamic" style="position: absolute; top: 50%; left: 0; height: 50%; width: 100%; background: yellow;">
            Right click here is not dynamic.
        </div>
        <script>
            context.init({preventDoubleContext: false});
            context.attach('#PNG_JPG', test_menu);
            context.attach('#NO_OPTIONS', test_menu);
            context.attach('#notDynamic', test_menu2);
        </script>
    </body>
</html>
